import { Card, Button, Icon, Progress } from 'antd';
import styles from './index.less';
import { Command,constants } from 'gg-editor';
const { EditorCommand } = constants;

const Legend = props => {
  const { number, center,zoomIn,zoomOut } = props;
  return (
    <div className={styles.legend}>
      <div className={styles.item}>
        <div style={{ width: 20, float: 'left', fontSize: 20 }} onClick={zoomIn}>
          <Icon type="minus-square" />
        </div>
        <div style={{ width: 200, float: 'left', margin: '1px 10px' }}>
          <Progress percent={number} />
        </div>
        <div style={{ width: 20, float: 'left', fontSize: 20 }} onClick={zoomOut}>
          <Icon type="plus-square" />
        </div>
        <div
          style={{ width: 20, float: 'left', fontSize: 20, marginLeft: 10, cursor: 'pointer' }}
          onClick={center}
        >
          <Icon type="gold" />
        </div>
      </div>
      <div className={styles.item}>
        <div
          style={{
            width: 80,
            height: 25,
            background: '#4490f0',
            float: 'left',
            marginRight: 10,
            borderRadius: 3,
          }}
        />
        <div>根节点</div>
      </div>
      <div className={styles.item}>
        <div
          style={{
            width: 80,
            height: 25,
            background: '#e9b770 ',
            float: 'left',
            marginRight: 10,
            borderRadius: 3,
          }}
        />
        <div>类别</div>
      </div>
      <div className={styles.item}>
        <div
          style={{
            width: 80,
            height: 25,
            background: '#dee8f2',
            float: 'left',
            marginRight: 10,
            borderRadius: 3,
          }}
        />
        <div>意图</div>
      </div>
      {/*<div className={styles.item}>*/}
      {/*  <div*/}
      {/*    style={{ width: 80, height: 25, background: '#fff', float: 'left', marginRight: 10,textAlign:'center'}}*/}
      {/*  >*/}
      {/*    <img src="../knowledge/knowMapImg/flow.png" alt="" width={16} height={16} />*/}
      {/*  </div>*/}
      {/*  <div>流程引导</div>*/}
      {/*</div>*/}
    </div>
  );
};

export default Legend;
